<template>
  <div class="wrapper">
    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </a-table>
    <div class="action">
      <div class="btn" @click="test">测试</div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
console.log('当前系统时间：', dayjs().format('YYYY-MM-DD HH:mm:ss'))

const columns = [
  {
    title: '标题',
    dataIndex: 'name'
  },
  {
    title: '价格',
    dataIndex: 'money'
  },
  {
    title: '地址',
    dataIndex: 'address'
  },
  {
    title: '年龄',
    dataIndex: 'age'
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 20,
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 20,
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 20,
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park'
  }
]
export default {
  components: {},
  props: {},
  data() {
    return {
      data,
      columns
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    test() {}
  },
  filters: {}
}
</script>
<style scoped lang="scss">
@mixin oneline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrapper {
  height: 100%;
  position: relative;
  border: 1px solid #000;
  .box {
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
  }
}
</style>
